<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- Styles -->
    <base href="../">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="fonts/themify-icons/themify-icons.css" type="text/css"/>
    <link rel="stylesheet" href="css/owl.carousel.css" type="text/css"/>
    <link rel="stylesheet" href="css/price-range.css" type="text/css"/>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="css/responsive.css" type="text/css"/>
    <link rel="stylesheet" href="css/colors.css" type="text/css"/>
    <link rel="stylesheet" href="js/rs-plugin/css/settings.css" type="text/css">
    <link rel="stylesheet" href="css/layui.css" type="text/css">
    <style>
        /* 居中 */
        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        .demo {
            width: 310px;
            margin: 0 auto;
        }

        .stamp * {
            padding: 0;
            margin: 0;
            list-style: none;
            font-family: "Microsoft YaHei", 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
        }

        .stamp {
            width: 367px;
            height: 110px;
            padding: 0 10px;
            margin-bottom: 50px;
            position: relative;
            overflow: hidden;
        }

        .stamp:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 10px;
            right: 10px;
            z-index: -1;
        }

        .stamp i {
            position: absolute;
            left: 20%;
            top: 45px;
            height: 190px;
            width: 390px;
            background-color: rgba(255, 255, 255, .15);
            transform: rotate(-30deg);
        }

        .stamp .par {
            float: left;
            padding: 16px 15px;
            width: 220px;
            border-right: 2px dashed rgba(255, 255, 255, .3);
            text-align: left;
        }

        .stamp .par p {
            color: #fff;
            font-size: 16px;
            line-height: 21px;
        }

        .stamp .par span {
            font-size: 40px;
            color: #fff;
            margin-right: 5px;
            line-height: 65px;
        }

        .stamp .par .sign {
            font-size: 34px;
        }

        .stamp .par sub {
            position: relative;
            top: -5px;
            color: rgba(255, 255, 255, .8);
        }

        .stamp .copy {
            display: inline-block;
            padding: 21px 14px;
            width: 100px;
            vertical-align: text-bottom;
            font-size: 30px;
            color: rgb(255, 255, 255);
            text-align: center;
            line-height: initial;
        }

        .stamp .copy p {
            font-size: 14px;
            margin-top: 15px;
        }

        .stamp03 {
            background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);
            background-size: 15px 15px;
            background-position: 9px 3px;
        }

        .stamp03:before {
            background-color: #7EAB1E;
        }

        .stamp03 .copy {
            padding: 10px 6px 10px 12px;
            font-size: 24px;
        }

        .stamp03 .copy p {
            font-size: 15px;
            margin-top: 5px;
            margin-bottom: 8px;
            color: #fff;
        }

        .stamp03 .copy a {
            background-color: #fff;
            color: #fff;
            font-size: 14px;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 3px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="theme-layout">
        <header class="simple-header for-sticky white">
            <div class="menu">
                <div class="container">
                    <div class="logo">
                        <a href="tenant/index2.html" title="">
                            <i class="fa fa-get-pocket"></i>
                            <span>Super SPS</span>
                            <strong></strong>
                        </a>
                    </div><!-- LOGO -->
                    <div class="popup-client" @click="initSign">
                        <span><i class="fa fa-user"></i> /  Signup</span>
                    </div>
                    <span class="menu-toggle"><i class="fa fa-bars"></i></span>
                    <nav>
                        <h1 class="nocontent outline">--- Main Navigation ---</h1>
                        <ul>
                            <li class="menu-item-has-children">
                                <a href="#">HOME</a>
                                <ul>
                                    <li><a href="tenant/index2.html">租车位</a></li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="#" title="">VEHICULS</a>
                                <ul>
                                    <li><a href="vehiculs3.html" title="">vehiculs- Super </a></li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children mega">
                                <a href="#" title="">PAGES</a>
                                <ul>
                                    <li><a href="comingsoon.html" title="">Coming Soon</a></li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="#" title="">BLOG PAGES</a>
                                <ul>
                                    <li><a href="blog.html" title="">Blog Page</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html" title="">CONTACT</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

        <div class="inner-head overlap">
            <div style="background: url(img/parallax1.jpg) repeat scroll 50% 422.28px transparent;" class="parallax scrolly-invisible no-parallax"></div>
            <!-- PARALLAX BACKGROUND IMAGE -->
            <div class="container">
                <div class="inner-content">
                    <span><i class="ti ti-home"></i></span>
                    <h2>Personal information</h2>
                    <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">{{cname}}</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <section class="block">
            <div class="container agnet-prop">
                <div class="row">
                    <aside class="col-md-3 column">
                        <div class="agent_bg_widget widget">
                            <div class="agent_widget">
                                <div class="agent_pic">
                                    <img id="avatar" :src="img" alt="user_img"/>
                                    <div>{{name}}</div>
                                    <input type="file" ref="img" id="picpath" v-on:change="uploadImg" style="display:none;"/>
                                    <input type="button" value="上传照片" @click="clickBtn"/>
                                </div>
                                <ul class="agent-menu" style="cursor:pointer;">
                                    <li>
                                        <a @click.prevent="cname='information'"><i class="fa fa-user"></i> 个人信息</a>
                                    </li>
                                    <li>
                                        <a @click.prevent="cname='verified'"><i class="fa fa-credit-card"></i> 实名认证</a>
                                    </li>
                                    <li>
                                        <a @click.prevent="cname='plate'"><i class="fa fa-car"> </i> 车主认证</a>
                                    </li>
                                    <li>
                                        <a @click.prevent="cname='orders'"><i class="fa fa-bell"> </i> 我的订单</a>
                                    </li>
                                    <li>
                                        <a @click.prevent="cname='wallet'"><i class="fa fa-cny"> </i> 我的账户 </a>
                                    </li>
                                    <li>
                                        <a @click.prevent="cname='modify'"><i class="fa fa-pencil-square-o"> </i> 修改密码 </a>
                                    </li>
                                    <li>
                                        <a @click.prevent="cname='recommend'"><i class="fa fa-user-plus"> </i> 推荐用户 </a>
                                    </li>
                                    <li>
                                        <a @click.prevent="cname='recharge'"><i class="fa fa-money"> </i> 充值优惠 </a>
                                    </li>
                                    <li>
                                        <a @click="logout"><i class="fa fa-sign-out"> </i> 退出 </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </aside>
                    <component :is="cname"></component>
                </div>
            </div>
        </section>
    </div>

    <!-- 登陆弹窗 -->
    <div class="account-popup-sec">
        <div class="account-popup-area">
            <div class="account-popup">
                <div class="row">
                    <div class="col-md-6">
                        <div class="account-user">
                            <div class="logo">
                                <a href="#" title="">
                                    <i class="fa fa-get-pocket"></i>
                                    <span>KwitaraCars</span>
                                    <strong>SELL VEHICULS</strong>
                                </a>
                            </div><!-- LOGO -->
                            <form>
                                <h1>用户登录</h1>
                                <div class="field">
                                    <input type="text" placeholder="注册手机号" v-model="loginPhone"/>
                                </div>
                                <div class="field">
                                    <input type="password" placeholder="密码" v-model="loginPwd"/>
                                </div>
                                <div class="field">
                                    <input type="radio" id="yes"/><font color="white">记住账户</font>
                                    <button type="button" @click="cancel" class="btn btn-xs btn-danger">取消</button>
                                </div>
                                <div class="field">
                                    <input type="button" value="登录" @click="login" class="flat-btn"/>

                                </div>
                            </form>

                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="registration-sec">
                            <h1>用户注册</h1>
                            <form>
                                <div class="field">
                                    <input type="text" placeholder="用户名" @blur="verifyAccount" v-model="account"/>
                                    <span><font id="accountMsg"></font></span>
                                </div>
                                <div class="field">
                                    <input type="text" placeholder="手机号码" @blur="verifyPhone" v-model="phone"/>
                                    <span><font id="phoneiMsg"></font></span>
                                </div>
                                <div class="field">
                                    <input type="password" placeholder="密码" @blur="verifyPwd" v-model="pwd"/>
                                    <span><font id="pwdMsg"></font></span>
                                </div>
                                <div class="field">
                                    <input type="password" placeholder="确认密码" @blur="verifyRepwd" v-model="repwd"/>
                                    <span><font id="repwdMsg"></font></span>
                                </div>
                                <div class="field">
                                    <div class="col-lg-12">
                                        <div v-for="role in roles" class="col-lg-6">
                                            <input type="radio" :value="role.rid" name="rid">{{role.rname}} &nbsp;&nbsp;&nbsp;
                                        </div>
                                    </div>
                                </div>
                                <label>
                                    <input type="radio" id="confirm"/> 单击表示您同意我们的 <a href="javascript:void(0)"
                                                                                     @click="content" title="">条款和条件</a>
                                </label>

                                <input value="确认注册" @click="sign" type="button" class="flat-btn"/>
                            </form>
                        </div><!-- Registration sec -->
                    </div>
                </div>
                <span class="close-popup"><i class="fa fa-close"></i></span>
            </div>
        </div>
    </div><!-- Account Popup Sec -->

</div>

<!-- 用户信息组件 -->
<template id="information">
    <div class="col-md-9 column">
        <div class="heading4">
            <h2>个人信息</h2>
        </div>
        <div class="submit-content">
            <form id="user_form" method="post" class="vehicul-form">
                <div class="control-group">
                    <div class="group-title">Personal information</div>
                    <div class="group-container row">
                        <div class="col-md-4">
                            <div class="form-group">



                                <!-- &nbsp;&#42; -->
                                <label for="account">昵称</label>
                                <input type="text" id="account" class="form-control" v-model="account">
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="birthday"> 出生日期 </label>
                                <input type="text" id="birthday" class="form-control" v-model="birthday">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="uenmail"> 邮箱 </label>
                                <input type="text" id="uenmail" class="form-control" v-model="uemail">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="province"> 省 </label>
                                <select id="province" class="form-control" v-model="province">
                                    <option v-for="option in provinceArr">
                                        {{option.name}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="city"> 市 </label>
                                <select id="city" class="form-control" v-model="city">
                                    <option v-for="option in cityArr">
                                        {{option.name}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="areas"> 区 </label>
                                <select id="areas" class="form-control" v-model="areas">
                                    <option v-for="option in areaArr">
                                        {{option.name}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="info"> 详细地址 </label>
                                <input type="text" id="info" class="form-control" v-model="info">
                            </div>
                        </div>
                    </div>
                    <div class="submit" style="clear: both; margin-top: 25px;">
                        <div class="col-md-push-5 col-md-6">
                            <input type="button" class="btn btn-lg flat-btn" id="submit" value="提交" @click="update()">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<!-- 实名认证组件 -->
<template id="verified">
    <div class="col-md-9 column">
        <div class="heading4">
            <h2>实名认证</h2>
        </div>
        <div class="control-group">
            <div class="group-title">身份证正面</div>
            <div class="group-container row">
                <div class="col-md-12">
                    <div class="moxie-shim moxie-shim-html5">
                        <label for="front_img" class="btn flat-btn btn-lg" v-if="!frontImg">Select Images</label>
                        <FormItem label="front">
                            <div class="ivu-upload ivu-upload-drag">
                                <input id="front_img" type="file" class="ivu-upload-input" ref="idCardFront" v-on:change="up1">
                                <div style="padding: 20px 0px;" v-else>
                                    <i class="ivu-icon ivu-icon-ios-cloud-upload"
                                       style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                                </div>
                            </div>
                        </FormItem>
                    </div>
                    <img :src="frontImg" v-if="frontImg" width="300px" height="200px">
                    <p v-if="!frontImg">请上传您的身份证正面</p>
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="group-title">身份证反面</div>
            <div class="group-container row">
                <div class="col-md-12">
                    <div class="moxie-shim moxie-shim-html5">
                        <label for="back_img" class="btn flat-btn btn-lg" v-if="!backImg">Select Images</label>
                        <FormItem label="back">
                            <div class="ivu-upload ivu-upload-drag">
                                <input id="back_img" type="file" class="ivu-upload-input" ref="idCardBack" v-on:change="up2">
                                <div style="padding: 20px 0px;" v-else>
                                    <i class="ivu-icon ivu-icon-ios-cloud-upload"
                                       style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                                </div>
                            </div>
                        </FormItem>
                    </div>
                    <img :src="backImg" v-if="backImg" width="300px" height="200px">
                    <p v-if="!backImg">请上传您的身份证反面</p>
                </div>
            </div>
        </div>
        <div class="submit" style="clear: both; margin-top: 25px;">
            <div class="col-md-push-5 col-md-6">
                <input type="button" class="btn btn-lg flat-btn" value="提交" @click="verified" v-if="flag">
            </div>
        </div>
    </div>
</template>

<!-- 上传车牌照和驾照 -->
<template id="plate">
    <div class="col-md-9 column">
        <div class="heading4">
            <h2>车辆信息</h2>
        </div>
        <div class="control-group">
            <div class="group-title">车牌</div>
            <div class="group-container row">
                <div class="col-md-12">
                    <div class="moxie-shim moxie-shim-html5">
                        <label for="plateImg" class="btn flat-btn btn-lg" v-if="!plate">Select Images</label>
                        <FormItem label="plateImg">
                            <div class="ivu-upload ivu-upload-drag">
                                <input id="plateImg" type="file" class="ivu-upload-input" ref="plate" v-on:change="up1">
                                <div style="padding: 20px 0px;" v-else>
                                    <i class="ivu-icon ivu-icon-ios-cloud-upload"
                                       style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                                </div>
                            </div>
                        </FormItem>
                    </div>
                    <img :src="plate" v-if="plate" width="300px" height="200px">
                    <p v-if="!plate">请上传您的车牌照片</p>
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="group-title">驾驶证</div>
            <div class="group-container row">
                <div class="col-md-12">
                    <div class="moxie-shim moxie-shim-html5">
                        <label for="driver" class="btn flat-btn btn-lg" v-if="!driver">Select Images</label>
                        <FormItem label="driver">
                            <div class="ivu-upload ivu-upload-drag">
                                <input id="driver" type="file" class="ivu-upload-input" ref="driver" v-on:change="up2">
                                <div style="padding: 20px 0px;" v-else>
                                    <i class="ivu-icon ivu-icon-ios-cloud-upload"
                                       style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                                </div>
                            </div>
                        </FormItem>
                    </div>
                    <img :src="driver" v-if="driver" width="300px" height="200px">
                    <p v-if="!driver">请上传您的驾驶证</p>
                </div>
            </div>
        </div>
        <div class="submit" style="clear: both; margin-top: 25px;">
            <div class="col-md-push-5 col-md-6">
                <input type="button" class="btn btn-lg flat-btn" value="提交" @click="uploadPlate()" v-if="flag">
            </div>
        </div>
    </div>
</template>

<!-- 用户订单组件 -->
<template id="orders">
    <div class="col-md-9 column">
        <div class="heading4">
            <h2>我的订单</h2>
        </div>
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>订单号</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>支付时间</th>
                <th>离开时间</th>
                <th>订单价格</th>
                <th>订单状态</th>
                <th>评论</th>
                <th>退款</th>
                <th>投诉</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(item,index) in ordersList">
                <tr>
                    <td>{{index+1}}</td>
                    <td>{{item.onumber}}</td>
                    <td>{{item.starttime}}</td>
                    <td>{{item.endtime}}</td>
                    <td>{{item.paytime}}</td>
                    <td>{{item.leavetime}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.status}}</td>
                    <td>
                        <button class="btn btn-success" @click="comment(item.pid)" :disabled="item.status!='已完成'">评论</button>
                    </td>
                    <td>
                        <button class="btn btn-warning" @click="refund(item.pid2)" :disabled="item.status=='退款中'||item.status=='已完成'">退款</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" @click="report(item.pid)" :disabled="item.status=='已完成'">投诉</button>
                    </td>
                </tr>
            </template>
            </tbody>
            <tfoot>
            <td colspan="10" style="cursor: pointer;">
                <a @click="go(pageInfo.firstPage)">首页</a>
                <a @click="go(pageInfo.prePage)">上一页</a>
                <a @click="go(pageInfo.nextPage)">下一页</a>
                <a @click="go(pageInfo.pages)">尾页</a>
            </td>
            </tfoot>
        </table>
        <div class="submit-content" id="comm" hidden>
            <div class="control-group">
                <div class="group-container row">
                    <div class="col-md-12">
                        <label for="score"> 请为本次订单评分 </label>
                        <div class="dropdown label-select">
                            <select class="form-control" id="score" v-model="score">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="form-group s-prop-desc">
                                <label for="desc"> 您可以写下您的评价和建议 </label>
                                <textarea id="desc" rows="5" style="width: 100%;" v-model="content"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="submit" style="clear: both; margin-top: 25px;">
                        <div class="col-md-push-5 col-md-6">
                            <input type="button" class="btn btn-lg flat-btn" value="提交" @click="subcomm">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="submit-content" id="report" hidden>
            <div class="control-group">
                <div class="group-container row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="form-group s-prop-desc">
                                <label for="reason"> 请写下您的投诉理由 </label>
                                <textarea id="reason" rows="5" style="width: 100%;" v-model="reason"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="submit" style="clear: both; margin-top: 25px;">
                        <div class="col-md-push-5 col-md-6">
                            <input type="button" class="btn btn-lg flat-btn" value="提交" @click="subreport">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<!-- 用户钱包组件 -->
<template id="wallet">
    <div class="col-md-9 column">
        <div class="heading4">
            <h2>我的钱包</h2>
        </div>
        <div class="col-md-6">
            <div class="heading2">
                <h3>账户余额</h3>
            </div>
            <div class="plan-content">
                <div align="center">
                    <h2><span class="price">¥{{balance}}</span></h2>
                    <input class="btn btn-success" value="充值" type="button" @click="recharge()">
                    <input class="btn btn-warning" value="提现" type="button" @click="withdraw()">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="heading2">
                <h3>我的卡包</h3>
            </div>
            <div class="demo">
                <template v-for="coupon in couponList">
                    <div class="stamp stamp03">
                        <div class="par">
                            <p>订单满{{coupon.coupon.conditionMoney}}元</p>
                            <sub class="sign">￥</sub><span>{{coupon.coupon.money}}.00</span><sub>优惠券</sub>
                        </div>
                        <div class="copy">
                            <p>Super SPS</p>
                            副券
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="submit-content" id="rech" hidden>
            <div class="control-group">
                <div class="group-container row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="money"> 请输入金额 </label>
                            <input type="text" id="money" class="form-control" v-model="money">
                        </div>
                    </div>
                    <div class="submit" style="clear: both; margin-top: 25px;">
                        <div class="col-md-push-5 col-md-6">
                            <input type="button" class="btn btn-lg flat-btn" value="提交" @click="updateBalance">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="submit-content" id="withdraw" hidden>
            <div class="control-group">
                <div class="group-container row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="withmoney"> 请输入金额 </label>
                            <input type="text" id="withmoney" class="form-control" v-model="withmoney">
                        </div>
                    </div>
                    <div class="submit" style="clear: both; margin-top: 25px;">
                        <div class="col-md-push-5 col-md-6">
                            <input type="button" class="btn btn-lg flat-btn" value="提交" @click="withdrawMoney">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<!-- 修改密码组件 -->
<template id="modify">
    <div>
        <div class="col-md-9 column" style="display: block" id="getCode">
            <div class="heading4">
                <h2>获取验证码</h2>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <label for="pwd_old"> 绑定手机号 </label>
                    <input type="text" id="mod_phone" @blur="verifyPhone" class="form-control">
                    <span><font id="phoneMsg"></font></span>
                </div>
            </div>
            <div class="col-md-12" style="margin-inside:0px; ">
                <div class="form-group" style="margin-outside:0px; ">
                    <div class="col-md-6" style="padding: 0px; ">
                        <label for="pwd_new"> 验证码 </label>
                        <input type="text" id="conCode" @blur="verifyConCode" class="form-control" style="margin:0px; ">
                        <span><font id="conCodeMsg"></font></span>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-lg btn-primary" @click="getConCode" style="margin-top: 20px;">获取验证码</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-12" style="margin-bottom: 25px;">

            </div>
            <div class="submit" style="margin: 100px;">
                <div class="col-md-push-5 col-md-6">
                    <input type="button" class="btn btn-lg flat-btn" value="点击确认" @click="confirm_code">
                </div>
            </div>
        </div>
        <div class="col-md-9 column" id="updateForm" style="display: none">
            <div class="heading4">
                <h2>修改密码</h2>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <label for="pwd_old"> 原密码 </label>
                    <input type="password" id="pwd_old" @blur="verifyPwd_old" class="form-control" v-model="pwd_old">
                    <span><font id="pwd_oldMsg"></font></span>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <label for="pwd_new"> 新密码 </label>
                    <input type="password" id="pwd_new" class="form-control" @blur="verifyPwd_new" v-model="pwd_new">
                    <span><font id="pwd_newMsg"></font></span>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <label for="pwd_new2"> 再次输入 </label>
                    <input type="password" id="pwd_new2" class="form-control" @blur="verifyPwd_new2" v-model="pwd_new2">
                    <span><font id="pwd_new2Msg"></font></span>
                </div>
            </div>
            <div class="submit" style="clear: both; margin-top: 25px;">
                <div class="col-md-push-5 col-md-6">
                    <input type="button" class="btn btn-lg flat-btn" value="提交" @click="modify()">
                </div>
            </div>
        </div>
    </div>
</template>

<!-- 推荐用户组件 -->
<template id="recommend">
    <div class="col-md-9 column">
        <div class="heading4">
            <h2>推荐用户</h2>
        </div>
        <div class="col-md-6">
            <div class="heading2">
                <h3>我的二维码</h3>
            </div>
            <div class="plan-content">
                <form class="subscription_post">
                    <div id="mycode" align="center"></div>
                </form>
                <div align="center">
                    {{mycode}}<br>
                    <div class="package-info">
                        Your Referral Code
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="heading2">
                <h3>填写邀请码</h3>
            </div>
            <div class="plan-content">
                <form class="subscription_post">
                    <div class="form-group">
                        <br>
                        <label for="othercode">推荐码</label>
                        <input id="othercode" class="input-group" v-model="othercode" :disabled="!flag"/>
                        <br>
                        <input class="btn btn-success" value="提交" type="button" :disabled="!flag" @click="referralCode()">
                    </div>
                    <div class="package-info">
                        You Can&nbsp;
                        <a @click.prevent="cname='verified'">Fill in someone else's</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<!-- 用户充值组件 -->
<template id="recharge">
    <div class="col-md-9">
        <div class="heading4">
            <h2>充值界面</h2>
        </div>
        <div class="col-md-6">
            <div class="price-table">
                <ul>
                    <li class="price-title">Super Member</li>
                    <li class="price-area"><i class="ti ti-home"></i>
                        <h3><i>¥</i>99</h3></li>
                    <li class="price-title">SSPS 超级会员</li>
                    <li class="price-table">满500抵100优惠券<span style="color: red;font-size: 30px">*1</span></li>
                    <li class="price-table">满200抵25优惠券<span style="color: red;font-size: 30px">*2</span></li>
                    <li class="price-table">满100抵10优惠券<span style="color: red;font-size: 30px">*5</span></li>
                    <li class="price-features"></li>
                    <li class="price-features"></li>
                    <li class="price-button"><a title="" @click="topup('x')">充值</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-6">
            <div class="price-table">
                <ul>
                    <li class="price-title">Invincible Member</li>
                    <li class="price-area"><i class="ti ti-home"></i>
                        <h3><i>¥</i>299</h3></li>
                    <li class="price-title">SSPS 无敌会员</li>
                    <li class="price-table">满500抵100优惠券<span style="color: red;font-size: 30px">*3</span></li>
                    <li class="price-table">满200抵25优惠券<span style="color: red;font-size: 30px">*8</span></li>
                    <li class="price-table">满100抵10优惠券<span style="color: red;font-size: 30px">*10</span></li>
                    <li class="price-features"></li>
                    <li class="price-features"></li>
                    <li class="price-button"><a title="" @click="topup('y')">充值</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<div id="contentDiv" style="display: none;">
    12456
</div>
<!-- Script -->
<script type="text/javascript" src="js/modernizr.js"></script><!-- Modernizer -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><!-- Jquery -->
<script type="text/javascript" src="js/bootstrap.min.js"></script><!-- Bootstrap -->
<script type="text/javascript" src="js/owl.carousel.min.js"></script><!-- Owl Carousal -->
<script type="text/javascript" src="js/html5lightbox.js"></script><!-- HTML -->
<script type="text/javascript" src="js/scrolly.js"></script><!-- Parallax -->
<script type="text/javascript" src="js/price-range.js"></script><!-- Parallax -->
<script type="text/javascript" src="js/script.js"></script><!-- Script -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
<script src="https://www.layuicdn.com/layDate-v5.0.9/laydate.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
    let accountZz = /^[\u4E00-\u9FA5A-Za-z0-9_\s]{4,12}$/;
    let phoneZz = /^1(3|4|5|7|8)\d{9}$/;
    let pwdZz = /^[A-Za-z0-9]{6,12}$/;
    let codeZz = /^[0-9]{6}$/
    let app = new Vue({
        el: "#app",
        data: {
            /* 用户的真实姓名 */
            name: "",
            /* 用户头像的地址 */
            img: "",
            /* 定义默认显示哪个组件 */
            cname: "information",
            account: "",//注册账户
            phone: "",//注册手机
            pwd: "",//注册密码
            repwd: "",//再次输入密码
            layerDiv: null,//服务条款内容
            roles: null,//注册面板展示可注册的角色
            loginPhone: null,//登录手机号
            loginPwd: null,//登录密码
            rember: null,//是否记住密码
        },
        mounted() {
            axios.defaults.baseURL = "http://309ly20439.wicp.vip";
            axios.defaults.withCredentials = true;
            this.loginPwd = $.cookie("password");
            this.loginPhone = $.cookie("phone");
            console.log($.cookie("rember"))
            if ($.cookie("rember") == 'false') {
                $("#yes").prop("checked", false);
            } else {
                $("#yes").prop("checked", $.cookie("rember"));
            }
            this.init();
        },
        components: {

            information: {
                template: "#information",
                data() {
                    return {
                        account: "",
                        birthday: "",
                        uemail: "",
                        province: "陕西省",
                        city: "",
                        areas: "",
                        provinceArr: [],
                        cityArr: [],
                        areaArr: [],
                        info: "",
                    }
                },
                mounted() {
                    axios.defaults.baseURL = "http://309ly20439.wicp.vip"
                    this.init();
                    laydate.render({
                        elem: "#birthday"
                        , theme: 'molv',
                        format: 'yyyy-MM-dd',// 设置显示格式
                        done: value => {
                            this.birthday = value;
                        }
                    });
                },
                methods: {
                    init() {
                        var self = this;
                        $.getJSON("./js/city_code.json", function (res) {
                            self.provinceArr = res;
                            self.updateCity()
                            self.updateArea()
                            axios.post("ternant/selectOne").then(function (res) {
                                self.account = res.data.loginUser.acount;
                                self.birthday = res.data.loginUserInfo.birthday.substr(0, 10);
                                self.uemail = res.data.loginUserInfo.uemail;
                                self.province = res.data.loginUserInfo.address.split(",")[0];
                                self.city = res.data.loginUserInfo.address.split(",")[1];
                                self.areas = res.data.loginUserInfo.address.split(",")[2];
                                self.info = res.data.loginUserInfo.address.split(",")[3];
                            });
                        });
                    },
                    updateCity: function () {
                        for (let i in this.provinceArr) {
                            let obj = this.provinceArr[i];
                            if (obj.name === this.province) {
                                this.cityArr = obj.city;
                                break;
                            }
                        }
                        this.city = this.cityArr[0].name;
                    },
                    updateArea: function () {
                        for (let i in this.cityArr) {
                            let obj = this.cityArr[i];
                            if (obj.name === this.city) {
                                this.areaArr = obj.area;
                                break;
                            }
                        }
                        // if (this.areaArr && this.areaArr.length >= 0 && this.areaArr[0].name) {
                        //     this.areas = this.areaArr[0].name;
                        // } else {
                        //     this.areas = '';
                        // }
                        if (this.areas === '') {
                            this.areas = this.areaArr[0].name;
                        }
                    },
                    update() {
                        let self = this;
                        axios.post("ternant/updateUser", {
                            "acount": self.account,
                            "birthday": self.birthday,
                            "uemail": self.uemail,
                            "address": self.province + "," + self.city + "," + self.areas + "," + self.info,
                        }).then(function (res) {
                            layer.msg(res.data.result, function () {
                                self.init();
                            })
                        });
                    },
                },
                watch: {
                    province: function () {
                        this.updateCity();
                        this.updateArea();
                    },
                    city: function () {
                        this.updateArea();
                    }
                }
            },

            verified: {
                template: "#verified",
                data() {
                    return {
                        backImg: "",
                        frontImg: "",
                        flag: true,
                    };
                },
                mounted() {
                    axios.defaults.baseURL = "http://309ly20439.wicp.vip"
                    this.init();
                },
                methods: {
                    init() {
                        let self = this;
                        axios.post("ternant/selectOne").then(function (res) {
                            if (res.data.loginUserInfo.idCardFront != null) {
                                self.frontImg = "http://" + res.data.loginUserInfo.idCardFront;
                                self.flag = false;
                            }
                            if (res.data.loginUserInfo.idCardBack != null) {
                                self.backImg = "http://" + res.data.loginUserInfo.idCardBack;
                                self.flag = false;
                            }
                        });
                    },
                    verified() {
                        let self = this;
                        let formData = new FormData();
                        formData.append("idCardFront", this.$refs.idCardFront.files[0]);
                        formData.append("idCardBack", this.$refs.idCardBack.files[0]);
                        axios.post("ternant/verified", formData).then(function (res) {
                            layer.msg(res.data.result, function () {
                                self.init();
                            })
                        });
                    },
                    // 选择文件
                    up1(e) {
                        // 获取待上传的文件对象
                        let file = e.target.files[0]
                        // 声明一个读取文件对象
                        let reader = new FileReader();
                        // 开始读取文件内容
                        reader.readAsDataURL(file);
                        // 读取操作结束时触发
                        reader.onloadend = (ev) => {
                            // 赋值给vue对象属性
                            this.frontImg = ev.target.result
                        };
                    },
                    up2(e) {
                        // 获取待上传的文件对象
                        let file = e.target.files[0]
                        // 声明一个读取文件对象
                        let reader = new FileReader();
                        // 开始读取文件内容
                        reader.readAsDataURL(file);
                        // 读取操作结束时触发
                        reader.onloadend = (ev) => {
                            // 赋值给vue对象属性
                            this.backImg = ev.target.result
                        };
                    },
                },
            },

            plate: {
                template: "#plate",
                data() {
                    return {
                        plate: "",
                        driver: "",
                        flag: true,
                    };
                },
                mounted() {
                    axios.defaults.baseURL = "http://309ly20439.wicp.vip"
                    this.init();
                },
                methods: {
                    init() {
                        let self = this;
                        axios.post("ternant/selectOneInformation").then(function (res) {
                            if (res.data.information.plateimg != null) {
                                self.plate = "http://" + res.data.information.plateimg;
                                self.flag = false;
                            }
                            if (res.data.information.driverimg != null) {
                                self.driver = "http://" + res.data.information.driverimg;
                                self.flag = false;
                            }
                        });
                    },
                    uploadPlate() {
                        let self = this;
                        let formData = new FormData();
                        formData.append("plateimg", this.$refs.plate.files[0]);
                        formData.append("driverimg", this.$refs.driver.files[0]);
                        axios.post("ternant/uploadPlate", formData).then(function (res) {
                            layer.msg(res.data.result, function () {
                                self.init();
                            })
                        });
                    },
                    // 选择文件
                    up1(e) {
                        // 获取待上传的文件对象
                        let file = e.target.files[0]
                        // 声明一个读取文件对象
                        let reader = new FileReader();
                        // 开始读取文件内容
                        reader.readAsDataURL(file);
                        // 读取操作结束时触发
                        reader.onloadend = (ev) => {
                            // 赋值给vue对象属性
                            this.plate = ev.target.result
                        };
                    },
                    up2(e) {
                        // 获取待上传的文件对象
                        let file = e.target.files[0]
                        // 声明一个读取文件对象
                        let reader = new FileReader();
                        // 开始读取文件内容
                        reader.readAsDataURL(file);
                        // 读取操作结束时触发
                        reader.onloadend = (ev) => {
                            // 赋值给vue对象属性
                            this.driver = ev.target.result
                        };
                    },
                },
            },

            orders: {
                template: "#orders",
                data() {
                    return {
                        ordersList: null,
                        pageInfo: null,
                        pid: "",
                        score: "5",
                        content: "",
                        reason: "",
                    };
                },
                mounted() {
                    axios.defaults.baseURL = "http://309ly20439.wicp.vip";
                    this.go(1);
                },
                methods: {
                    go(page) {
                        let self = this;
                        axios.post("ternant/selectAllOrders", {
                            page: page,
                        }).then(function (res) {
                            self.ordersList = res.data.ordersList;
                            self.pageInfo = res.data.pageInfo;
                        })
                    },
                    refund(pid2) {
                        let self = this;
                        layer.msg('确定退款吗？', {
                            time: 0 //不自动关闭
                            , btn: ['yes', 'no']
                            , yes: function (index) {
                                axios.post("ternant/refund", {
                                    pid2: pid2
                                }).then(function (res) {
                                    layer.msg(res.data.result, function () {
                                        self.go(1)
                                    })
                                    layer.close(index);
                                })
                            }
                        });
                    },
                    comment(pid) {
                        let self = this;
                        self.pid = pid;
                        layer.open({
                            type: 1,
                            title: false,
                            area: ['500px', '380px'], //宽高
                            content: $("#comm"),
                            cancel: function () {
                                self.pid = "";
                                self.score = "5";
                                self.content = "";
                            },
                        });
                    },
                    subcomm() {
                        let self = this;
                        axios.post("ternant/addComment", {
                            pid: self.pid,
                            score: self.score,
                            content: self.content,
                        }).then(function (res) {
                            layer.msg(res.data.result, function () {
                                self.go(1);
                            })
                        })
                    },
                    report(pid) {
                        let self = this;
                        self.pid = pid;
                        layer.open({
                            type: 1,
                            title: false,
                            area: ['500px', '300px'], //宽高
                            content: $("#report"),
                            cancel: function () {
                                self.reason = "";
                            },
                        });
                    },
                    subreport() {
                        let self = this;
                        axios.post("ternant/report", {
                            pid: self.pid,
                            reason: self.reason,
                        }).then(function (res) {
                            layer.msg(res.data.result, function () {
                                self.go(1);
                            })
                        })
                    }
                }
            },

            wallet: {
                template: "#wallet",
                data() {
                    return {
                        balance: "",
                        couponList: null,
                        money: "",
                        withmoney: "",
                        loginUserInfo: "",
                    };
                },
                mounted() {
                    axios.defaults.baseURL = "http://309ly20439.wicp.vip";
                    this.init();
                },
                methods: {
                    init() {
                        let self = this;
                        axios.post("ternant/selectAllCoupon").then(function (res) {
                            self.couponList = res.data.userCouponList;
                        });
                        axios.post("ternant/selectOne").then(function (res) {
                            self.balance = res.data.loginUserInfo.balance;
                            self.loginUserInfo = res.data.loginUserInfo;
                        });
                    },
                    recharge() {
                        layer.open({
                            type: 1,
                            title: false,
                            area: ['500px', '250px'], //宽高
                            content: $("#rech"),
                        });
                    },
                    updateBalance() {
                        let self = this;
                        axios.post("ternant/alipay", {
                            money: self.money,
                            uiid: self.loginUserInfo.uiid,
                        }).then(function (res) {
                            const div = document.createElement('div');
                            div.innerHTML = res.data; // res.data就是支付宝返回给你的form
                            document.body.appendChild(div);
                            div.id = "pay";
                            let targetForm = document.getElementById("pay").children[0];
                            // targetForm.setAttribute('target', '_blank'); // 加了_blank可能出问题所以我注释了
                            targetForm.submit();
                        });
                    },
                    withdraw() {
                        layer.open({
                            type: 1,
                            title: false,
                            area: ['500px', '250px'], //宽高
                            content: $("#withdraw"),
                        });
                    },
                    withdrawMoney() {
                        let self = this
                        axios.post("ternant/withdrawMoney", {
                            "money": self.withmoney,
                        }).then(function (res) {
                            lay.msg(res.data.result, function () {
                                self.init();
                            })
                        });
                    },
                },
            },

            modify: {
                template: "#modify",
                data() {
                    return {
                        pwd_old: "",
                        pwd_new: "",
                        pwd_new2: "",
                    };
                },
                methods: {
                    verifyPhone() {
                        if (!phoneZz.test($("#mod_phone").val())) {
                            $("#phoneMsg").attr("color", "red");
                            $("#phoneMsg").text("手机号格式错误");
                            return false;
                        } else {
                            $("#phoneMsg").attr("color", "green");
                            $("#phoneMsg").text("手机号格式正确");
                            return true;
                        }
                    },
                    verifyConCode() {
                        if (!codeZz.test($("#conCode").val())) {
                            $("#conCodeMsg").attr("color", "red");
                            $("#conCodeMsg").text("验证码格式错误");
                            return false;
                        } else {
                            $("#conCodeMsg").attr("color", "green");
                            $("#conCodeMsg").text("验证码格式正确");
                            return true;
                        }
                    },
                    verifyPwd_old() {
                        if (!pwdZz.test(this.pwd_old)) {
                            $("#pwd_oldMsg").attr("color", "red");
                            $("#pwd_oldMsg").text("密码格式错误，大小写字母，6~12位");
                            return false;
                        } else {
                            $("#pwd_oldMsg").attr("color", "green");
                            $("#pwd_oldMsg").text("密码格式正确");
                            return true;
                        }
                    },
                    verifyPwd_new() {
                        if (!pwdZz.test(this.pwd_new)) {
                            $("#pwd_newMsg").attr("color", "red");
                            $("#pwd_newMsg").text("密码格式错误，大小写字母，6~12位");
                            return false;
                        } else {
                            $("#pwd_newMsg").attr("color", "green");
                            $("#pwd_newMsg").text("密码格式正确");
                            return true;
                        }
                    },
                    verifyPwd_new2() {
                        if (!this.pwd == this.pwd_new2) {
                            $("#pwd_new2Msg").attr("color", "red");
                            $("#pwd_new2Msg").text("与第一次输入密码不一致");
                            return false;
                        } else {
                            $("#pwd_new2Msg").attr("color", "green");
                            $("#pwd_new2Msg").text("密码一致");
                            return true;
                        }
                    },
                    modify() {

                        let self = this;
                        if (self.verifyPwd_old() && self.verifyPwd_new() && self.verifyPwd_new2()) {
                            layer.confirm("确认修改？", {icon: 3, title: '提示'}, function (cindex) {
                                layer.close(cindex);
                                axios.post("/tenant2/updateTenant2Key", {
                                    password: self.pwd_new,
                                    oldpwd: self.pwd_old
                                }).then(function (data) {

                                    let result = data.data[10] + "" + data.data[11] + "" + data.data[12];

                                    if (result == 200) {
                                        layer.msg("修改成功,请重新登录", {time: 1000, icon: 6, shift: 6}, function () {
                                            location.href = "tenant/index2.html";
                                        });

                                    } else if (result == 210) {
                                        layer.msg("原密码错误", {time: 1000, icon: 5, shift: 6}, function () {
                                            location.reload();
                                        });
                                    } else {
                                        layer.msg("修改失败", {time: 1000, icon: 5, shift: 6}, function () {
                                            location.reload();
                                        });
                                    }
                                })//axios
                            });

                        } else {
                            layer.msg("输入信息异常", {time: 1000, icon: 5, shift: 6}, function () {
                            });
                        }

                    },//确认修改密码
                    confirm_code() {
                        let self = this;
                        if (self.verifyPhone() && self.verifyConCode()) {
                            axios.post("/tenant2/confirm_code", {
                                code: $("#conCode").val(),
                            }).then(function (data) {
                                if (data.data.result == 200) {
                                    layer.msg("验证码正确", {time: 1000, icon: 6, shift: 6}, function () {
                                        $("#getCode").css('display', 'none');
                                        $("#updateForm").css('display', 'block');
                                    });
                                } else {
                                    layer.msg("验证码错误！！！请重新获取", {time: 1000, icon: 5, shift: 6}, function () {
                                    });
                                }
                            })//axios
                        } else {
                            layer.msg("输入信息有误", {time: 1000, icon: 5, shift: 6}, function () {
                            });
                        }
                    },//确认验证码
                    getConCode() {

                        axios.post("/tenant2/getConCode", {
                            phone: $("#mod_phone").val()
                        }).then(function (data) {
                            if (data.data.result) {
                                layer.msg("验证码发送成功！！！有效期60s", {time: 1000, icon: 6, shift: 6}, function () {
                                });
                            } else {
                                layer.msg("验证码发送失败！！！", {time: 1000, icon: 5, shift: 6}, function () {
                                });
                            }
                        })//axios
                    },//获得验证码

                }
            },

            recommend: {
                template: "#recommend",
                data() {
                    return {
                        mycode: null,
                        othercode: null,
                        flag: true,
                    };
                },
                mounted() {
                    let self = this;
                    axios.defaults.baseURL = "http://309ly20439.wicp.vip";
                    axios.post("ternant/selectOne").then(function (res) {
                        self.mycode = res.data.loginUserInfo.mycode;
                        self.othercode = res.data.loginUserInfo.othercode;
                        if (self.othercode != null) {
                            self.flag = false;
                        }
                        $("#mycode").qrcode({
                            text: "http://172.16.5.48:63340/ssps/vue/tenant/index2.html?othercode=" + self.mycode,
                            width: 250,
                            height: 250,
                            colorDark: '#000',
                            colorLight: '#fff',
                        })
                    })
                },
                methods: {
                    referralCode() {
                        let self = this
                        axios.post("ternant/referralCode", {
                            "othercode": self.othercode,
                        }).then(function (res) {
                            lay.msg(res.data.result, function () {
                            })
                        });
                    },
                },
            },

            recharge: {
                template: "#recharge",
                mounted() {
                    axios.defaults.baseURL = "http://309ly20439.wicp.vip";
                },
                methods: {
                    topup(z) {

                        axios.post("ternant/topup", {
                            combo: z
                        }).then(function (res) {
                            const div = document.createElement('div');
                            div.innerHTML = res.data; // res.data就是支付宝返回给你的form
                            document.body.appendChild(div);
                            div.id = "pay";
                            let targetForm = document.getElementById("pay").children[0];
                            targetForm.setAttribute('target', '_blank'); // 加了_blank可能出问题所以我注释了
                            targetForm.submit();
                        });
                    }
                }
            },

        },
        methods: {
            init() {
                let self = this;
                axios.post("ternant/selectOne").then(function (res) {
                    self.name = res.data.loginUserInfo.uname;
                    self.img = "http://" + res.data.loginUserInfo.img;
                })
            },
            clickBtn() {
                $("#picpath").click();
            },
            uploadImg(e) {
                // 获取待上传的文件对象
                let file = e.target.files[0]
                // 声明一个读取文件对象
                let reader = new FileReader();
                // 开始读取文件内容
                reader.readAsDataURL(file);
                // 读取操作结束时触发
                let self = this;
                reader.onloadend = () => {
                    let formData = new FormData();
                    formData.append("img", this.$refs.img.files[0]);
                    axios.post("ternant/uploadImg", formData).then(function (res) {
                        layer.msg(res.data.result, function () {
                            self.init();
                        })
                    });
                };
            },
            logout() {
                axios.post("ternant/logout").then(function (res) {
                    layer.msg(res.data.substring(11, 13), function () {
                        // 跳转首页
                        location.href = "tenant/index2.html";
                    })
                })
            },


            login() {

                if (!phoneZz.test(this.loginPhone)) {
                    layer.msg("手机号错误！！！", {time: 1000, icon: 5, shift: 6}, function () {
                    });
                    return;
                }
                if (!pwdZz.test(this.loginPwd)) {
                    layer.msg('密码错误！！！', {time: 1000, icon: 5, shift: 6}, function () {
                    });
                    return;
                }
                axios.post("/auth2/login2", {
                    phone: this.loginPhone,
                    password: this.loginPwd,
                    rember: $("#yes").prop("checked")
                }, {withCredentials: true}).then(function (data) {
                    console.log(data);
                    if (data.data.result) {
                        layer.msg('登录成功', {time: 1000, icon: 6, shift: 6}, function () {
                            location.reload();
                        });

                    } else {
                        layer.msg('登录失败', {time: 1000, icon: 5, shift: 6}, function () {
                        });
                    }
                })//axios
            },//登录页面


            initSign() {
                axios.post("/sign2/initAddUser2").then(function (data) {
                    app.roles = data.data.roles;
                    console.log(app.roles)
                })//axios
            },//initSign，初始化注册页面，填充需要注册的角色

            sign() {
                let rid = $("input[name='rid']:checked").val();

                //初始化注册页面
                let flag = $("#confirm").prop("checked");

                if (flag) {
                    if (this.verifyAccount() && this.verifyPhone() && this.verifyPwd() && this.verifyRepwd()) {
                        let self = this;
                        axios.post("/sign2/addUser2", {
                            acount: self.account,
                            phone: self.phone,
                            pwd: self.pwd,
                            rid: rid
                        }).then(function (data) {
                            if (flag) {
                                flag = true;
                            }
                            if (data.data.result == 200) {
                                layer.msg('注册成功前往登录', {time: 1000, icon: 6, shift: 6}, function () {
                                    location.reload();
                                });

                            } else if (data.data.result == 210) {
                                layer.msg("注册手机号已存在", {time: 1000, icon: 5, shift: 6}, function () {
                                });
                            } else if (data.data.result == 220) {
                                layer.msg("账号格式错误，由数字、汉字、字母组成，区分大小写，长度4~8位", {
                                    time: 1000,
                                    icon: 5,
                                    shift: 6
                                }, function () {
                                });
                            } else if (data.data.result == 230) {
                                layer.msg("手机号格式错误", {time: 1000, icon: 5, shift: 6}, function () {
                                });
                            } else if (data.data.result == 240) {
                                layer.msg("密码格式错误，大小写字母，6~12位", {time: 1000, icon: 5, shift: 6}, function () {
                                });
                            } else if (data.data.result == 250) {
                                layer.msg("添加失败", {time: 1000, icon: 5, shift: 6}, function () {
                                });
                            }


                        });//axios
                    } else {
                        layer.msg("注册信息错误", {time: 1000, icon: 5, shift: 6}, function () {
                        });
                    }
                } else {
                    layer.msg("请阅读并选中同意条款", {time: 1000, icon: 5, shift: 6}, function () {
                    });
                }

            },//sign，进行注册


            verifyAccount() {
                if (!accountZz.test(this.account)) {
                    $("#accountMsg").attr("color", "red");
                    $("#accountMsg").text("账号格式错误，由数字、汉字、字母组成，区分大小写，长度4~8位");
                    return false;
                } else {
                    $("#accountMsg").attr("color", "green");
                    $("#accountMsg").text("账号格式正确");
                    return true;
                }
            }
            ,//校验账户名
            verifyPhone() {
                if (!phoneZz.test(this.phone)) {
                    $("#phoneiMsg").attr("color", "red");
                    $("#phoneiMsg").text("手机号格式错误");
                    return false;
                } else {
                    $("#phoneiMsg").attr("color", "green");
                    $("#phoneiMsg").text("手机号格式正确");
                    return true;
                }
            }
            ,//校验手机号
            verifyPwd() {
                if (!pwdZz.test(this.pwd)) {
                    $("#pwdMsg").attr("color", "red");
                    $("#pwdMsg").text("密码格式错误，大小写字母，6~12位");
                    return false;
                } else {
                    $("#pwdMsg").attr("color", "green");
                    $("#pwdMsg").text("密码格式正确");
                    return true;
                }
            }
            ,//校验密码
            verifyRepwd() {
                if (!this.pwd == this.repwd) {
                    $("#repwdMsg").attr("color", "red");
                    $("#repwdMsg").text("与第一次输入密码不一致");
                    return false;
                } else {
                    $("#repwdMsg").attr("color", "green");
                    $("#repwdMsg").text("密码一致");
                    return true;
                }
            }
            ,//校验二次输入密码
            content() {
                // this.layerDiv =
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '240px'], //宽高
                    content: $('#contentDiv')
                });
            }
            ,//查看条款内容
            cancel() {
                $("#yes").prop("checked", false);
                $.cookie('phone', "", {'path': '/'});
                $.cookie('password', "", {'path': '/'});
                $.cookie("rember", false, {'path': '/'})
                location.reload();
            }
            ,//取消记住登录状态
        }
    })
</script>
</body>
</html>